Interactive Snippets 小元件設計(指南)

Interactive snippets 它們能顯示最新資訊,並提供來自你應用的快捷操作選項。

這包括 Spotlight、Siri 和快捷指令(Shortcuts)應用,這種整合能拓展你的應用在系統中的覆蓋面和實用性。

Interactive snippets 總是清晰地出現在螢幕頂部,覆蓋在其他內容之上。不會打斷使用者正在做的事,也能提供有用的資訊。要點確認、取消或滑掉它,它才會消失。非常適合用於展示應用中的簡單、日常任務和資訊。

Appearance 外觀設計

Larger type 較大字號

為了快速、即時的體驗,因此內容必須易讀易懂。文字比系統預設字號更大,較大的文字可以即時吸引使用者注意力,讓他們快速獲取關鍵資訊。確保元素之間有足夠間距,以避免佈局混亂。

Consistent margins 統一邊距

在佈局片段內容時,保持周邊邊距一致,可以讓整體更清晰易讀,這樣可以讓片段結構清晰,幫助使用者集中注意力在重點資訊上。你可以使用 ContainerRelativeShape API 來確保這些邊距具備響應性,在不同平臺和螢幕尺寸上自動適配。

Concise content 精簡內容

字變大了,能放的內容自然就少了。避免內容高度超過 340 點(points),否則會需要滾動,影響使用流暢性。相反,應保持內容簡潔,僅保留最重要的資訊。真要看更多內容,可以點進去你 app 裡的相應頁面。


Clear contrast 清晰對比

用你自己的 app 風格的背景時。注意文字與背景的對比度,尤其是在遠距離檢視時。若對比不足,可提升前景內容的對比度增強可讀性。

Interaction 互動

互動功能讓片段具備狀態感(stateful)和可操作性(actionable)可以放按鈕,讓使用者一上來就能點操作,簡單又直接。

還可以顯示更新後的資料,反映你應用中的最新資訊。舉個例子,比如有個追蹤喝水的小工具。透過新增一個“新增水量”的按鈕,讓資訊更具可操作性,同時保持體驗輕量。資料更新時,採用縮放和模糊效果作為反饋,這種方式為操作提供了明確的視覺反饋。直接更新資料來確認操作成功,使用者會更信任你的 app。

還可以同時包含多個按鈕和更新的資料內容。比如音訊均衡器片段可以顯示當前設定,也能讓使用者馬上切換幾個音效模式。

操作要簡單明瞭,而且要跟主要功能相關。即使沒有互動功能,也可以透過動畫展示你應用中的最新資訊。

Types 型別

一種是展示結果的,一種是讓你做決定的。

結果片段(results)

用於展示已確認操作的結果,或那些不需要進一步操作的資訊。不需要後續操作或決策,底部通常只會有一個“完成”(Done)按鈕。很適合用於檢視訂單狀態這類場景。

確認片段(confirmations)

當 Intent 需要使用者先執行某個操作後才能返回結果時,應使用確認片段。

舉個例子,一個咖啡下單的 Intent。雖然有按鈕可以調整濃縮咖啡的份量,但因為必須使用者操作後才能下單,所以屬於確認片段。按鈕上的動詞(如“下單”)清晰地傳達接下來的動作是什麼。

一旦確認訂單(例如兩份濃縮的拿鐵),接著的結果就會展示這個選擇的結果。這種模式幫助使用者明確地感知自己從啟動 Intent 到完成任務的整個過程。

系統有些標準動詞你可以選,也可以自己寫個更合適的。

When to show dialog 什麼時候使用對話內容

對話,是 Siri 為 App Intent 所朗讀的語音內容,對話內容對於以語音為主的互動至關重要。例如,使用者戴著 AirPods 沒看螢幕,也可以透過 Siri 朗讀的內容獲取結果或進行確認回應。

片段本身應當能清晰表達 Intent 的目的,而無需依賴語音內容,這樣可以減少冗餘資訊,讓片段更直觀易懂。

使用確認片段請求使用者操作,使用結果片段展示操作結果。